import React from 'react';
import { connect } from 'dva';
import { createForm } from 'rc-form';
import cx from 'classnames';
import { WingBlank, WhiteSpace, DatePicker, Picker, InputItem, Flex, List, Button, Toast } from 'antd-mobile';
import { Link, routerRedux } from 'dva/router';
import styles from '../scale/styles.less';
import { SCALE_PHY, SCALE_PREPRE } from 'const';

Array.prototype.remove = function(val) { 
  var index = this.indexOf(val); 
  if (index > -1) { 
  this.splice(index, 1); 
  } 
};
function isInArray(arr,value){
    for(var i = 0; i < arr.length; i++){
        if(value === arr[i]){
            return true;
        }
    }
    return false;
}

function ScalePrePreTemplate({ dispatch, location, form, questions, scalevalue, detail,...rest }) {
  const { getFieldProps, getFieldValue, setFieldsValue, validateFields, getFieldError } = form;
  const {patientHeight, patientWeight, patientHy, patientSc, isMiscarriage,  isAbortion, isReturn, patientValue, patientJw } = detail;
  const { Item } = List;
  if (!questions || questions.length !== SCALE_PHY.length) {
    questions = SCALE_PREPRE;
  }

  const jwData = [{ label: '大失血病史（大于400ml）', id: '9' }, { label: '子宫内膜异位症', id: '10' }, { label: '子宫内膜异位症', id: '11' },{ label: '其他', id: '1001' }];
 
  let scores = scalevalue[1] || [];
   let optionvalues;
  if(patientValue){
    optionvalues = patientValue.split(',') || [];
  }
  if(isInArray(optionvalues,'133')){
     optionvalues.remove("133");
     optionvalues.push("19");
     optionvalues.push("23");
  }
  if(isInArray(optionvalues,'134')){
     optionvalues.remove("134");
     optionvalues.push("21");
     optionvalues.push("25");
  }

  let xuanxiang = optionvalues.join(',') || "";
  function isActive(key, value, i) {
    if (xuanxiang ) {
      return xuanxiang.split('')[i] === value;
    }
    if (Array.from(scores).find(item => item === key)) {
      return true;
    }
    if (!getFieldValue(key)) {
      return false;
    }

    return getFieldValue(key) === value;
  }
  function isDisable(name, value, i){
    if(optionvalues){
      for(let i in optionvalues){
        if(optionvalues[i] === name){
          return true;
        }
      }
    }
    return false;
  }

  return (
    <WingBlank size="md">
      <WhiteSpace size="md" />
       <List>
        <Item >{ isReturn  == 1 ? "复诊" : "初诊"}</Item>
        <InputItem
         value={patientHy}
         editable={false}
       >
         怀孕次数
       </InputItem>
       <InputItem
         value={patientSc}
         editable={false}
       >
         生产次数
       </InputItem>
       <InputItem
         value={patientHeight}
         editable={false}
       >
         身高(cm) 
       </InputItem>
       <InputItem
         value={patientWeight}
         editable={false}
       >
         体重(kg) 
       </InputItem>
       <InputItem
         value={ isMiscarriage == 0 ? "无" : "有"}
         editable={false}
       >
         自然流产史
       </InputItem>
        <InputItem
         value={ isAbortion == 0 ? "无" : "有"}
         editable={false}
       >
         人工流产史
       </InputItem>
     </List>
       <List.Item>
        既往病史
        <List.Item.Brief>
          <Flex wrap="wrap" className={styles.questionOptions}>
            {jwData.map((option, i) => {
              const key = option.id;
              const value = option.label;
              return (
                <label key={key} className={cx(styles.questionOption, styles.questionOptionNormal, { [styles.questionOptionActive]: isDisable(key, value, i) })}>
                  <input type="checkbox" name={key} value={value} checked={isActive(key, value, i)}/>
                  {value}
                </label>
              
              );
            })}
        </Flex>
        </List.Item.Brief>
      </List.Item>
      <WhiteSpace size="md" />
        {questions.map((question, id) => (
          <div >
          
          <List>
            <Item>
              {question.title}
            </Item>
         {question.subject.map((question, i) => (
              <List.Item wrap >
                {`${i + 1}. ${question.title}`}
                <List.Item.Brief>
                  <Flex wrap="wrap" className={styles.questionOptions}>
                    {question.item.map((option, ii) => {
                      const key = option.id;
                      const value = option.title;
                      const item = option.id;
                      return (
                         <label key={key} 
                          className={cx(styles.questionOption, styles.questionOptionNormal, { [styles.questionOptionActive]:  isDisable(key, value, i), })}>
                            <input {...getFieldProps(`${key}`)} type="checkbox" name={key} value={value} checked={isActive(key, value, i)}/>
                            {value}
                          </label>
                      );
                    })}
                  </Flex>
                </List.Item.Brief>
              </List.Item>
            ))}
          </List>
          <WhiteSpace size="lg" />
            </div>
        ))}
    </WingBlank>
  );
}

export default connect(({ scale }) => ({ ...scale }))(createForm()(ScalePrePreTemplate));
